<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--媒体查询示例-->
		<style type="text/css">
			article {
				background: honeydew;
			}
			
			article section:after {
				content: "normal";
				font-weight: bold;
			}
			@media only screen and (max-width:768px) {
				
				article {
					background: pink;
				}
				article section:after {
					content: "small than 768px";
					font-weight: bold;
				}
			}
			
			@media only screen and (min-width:1024px) and (max-width:1365px) {
				article {
					background: #6cf;
				}
				article section:after {
					content: "big than 1024px";
					font-weight: bold;
				}
				article header h1{
					color: red;
				}
			}
			@media only screen and (min-width:1366px) {
				article {
					background: lightgreen;
				}
				article section:after {
					content: "big than 1366px";
					font-weight: bold;
				}
				article header h1:after{
					content: "-not red";
				}
			}
		</style>
	</head>

	<body>
		<article>
			<header>
				<h1>Title</h1>
			</header>
			<section>
				Some text...Some text...Some text...Some text...Some text...Some text...
			</section>
		</article>
	</body>

</html>